<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>常用事件</title>
	</head>
	<body>
		姓名：<input type="text" id="uname" >
		<button type="button" onclick="clickBtn()">按钮</button>
		<hr >
		城市：<select id="city">
			<option>请选择城市</option>
			<option>上海</option>
			<option>北京</option>
		</select>
		<hr >
		<div id="div1">
			这是一个div
		</div>
	</body>
	<!--
		常用事件：
			onload：当页面加载完后立即触发
			onblur：元素失去焦点
			onfocus：元素获得焦点
			onclick：鼠标点击某个对象
			onchange：用户改变***的内容
			onmouseover：鼠标移动到某个元素上
			onmouseout：鼠标从某个元素上离开
			onkeyup：某个键盘的键被松开
			onkeydown：某个键盘的键被按下
	 -->
	 <script type="text/javascript">
	 	// onload：当页面或图像加载完后立即触发
		window.onload = function(){
			console.log("页面加载完毕...");
		}
		var uname = document.getElementById("uname");
		// onblur：元素失去焦点
		uname.onblur = function(){
			console.log("文本框失去焦点...");
		}
		// onfocus：元素获得焦点
		uname.onfocus = function(){
			console.log("文本框获得焦点...");
		}
		// onclick：鼠标点击某个对象
		function clickBtn(){
			console.log("按钮被点击了...");
		}
		// onchange：用户改变域的内容
		document.getElementById("city").onchange = function(){
			console.log("下拉框的值改变了...");
		}

		var div1 = document.getElementById("div1");
		// onmouseover：鼠标移动到某个元素上
		div1.onmouseover = function(){
			console.log("鼠标悬停...");
		}
		// onmouseout：鼠标从某个元素上离开
		div1.onmouseout = function(){
			console.log("鼠标移开...");
		}

		// 	onkeyup：某个键盘的键被松开
		uname.onkeydown = function(){
			console.log("按键按下...");
		}
		// 	onkeydown：某个键盘的键被按下
		uname.onkeyup = function(){
			console.log("按键弹起...");
		}
	 </script>
</html>
